{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/editor-md/css/editormd.min.css' %}">
    <style>
        .function {
            float: right;
            position: relative;
            top: -7px;
        }

        .wiki-menu {
            min-height: 500px;
            border-right: 1px solid #dddddd;
        }

        .wiki-content {
            min-height: 600px;
            border-left: 1px solid #dddddd;
            position: relative;
            left: -1px;
        }

        .panel-body {
            padding: 0 15px;
        }

    </style>
{% endblock %}

{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="fa fa-book"></i>
            Wiki文档
            <div class="function">
                <button type="button" class="btn btn-primary"><i class="fa fa-plus-square"></i> &nbsp 新建</button>
                <button type="button" class="btn btn-info"><i class="fa fa-edit"></i>&nbsp编辑</button>
                <button type="button" class="btn btn-warning"><i class="fa fa-remove"></i>&nbsp删除</button>
            </div>
        </div>
        <div class="panel-body">
            <div class="wiki-main">
                <div class="col-md-3 wiki-menu">
                    <ul id="wiki-catelog">

                    </ul>
                </div>
                <div class="col-md-9 wiki-content">
                    <form method="post">
                        {% csrf_token %}
                        {% for field in add_wiki_form %}
                            {% if field.name == 'content' %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    <div id="md-editor">
                                        {{ field }}
                                    </div>
                                    <span class="err-msg"></span>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <span class="err-msg"></span>
                                </div>
                            {% endif %}
                        {% endfor %}
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'web/plugin/editor-md/editormd.min.js' %}"></script>
    <script>
        $(function () {
            initMdEditor();
            initWikiCatelog();
        });

        function initMdEditor() {
            editormd("md-editor", {
                placeholder: "请输入内容",
                height: 500,
                width: '100%',
                path: "{% static 'web/plugin/editor-md/lib/' %}",  // Autoload modules mode, codemirror, marked... dependents libs path
                imageUpload:true, // 添加本地上传按钮
                imageFormats:["jpg",'jpeg','png','gif'],  // 本地上传允许的文件格式
                imageUploadURL: "{% url 'wiki_upload' project_id=request.login_user.project.id %}"  // 上传后调用的接口
            });
        }

        function initWikiCatelog() {
            var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.login_user.project.id %}";
            $.ajax({
                url: '{% url 'wiki_catelog' project_id=request.login_user.project.id %}',
                type: 'GET',
                data: '',
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        console.log(res.wiki_list);
                        $.each(res.wiki_list, function (index, item) {
                            // 拼接wiki的URL链接
                            var href = WIKI_DETAIL_URL + "?wiki=" + item.id;
                            // 创建一个li标签，设置id属性，在li标签内新建一个a标签，给a标签设置内容和href属性，最后在创建一个ul标签
                            // <li id='xxx'>
                            //     <a href='link'> title </a>
                            //     <ul></ul>
                            // </li>
                            var li = $("<li>").attr('id', "id_" + item.id).append($('<a>').text(item.title).attr('href', href)).append($('<ul>'));

                            if (!item.parent) {
                                // 如果没有父级别目录，那么就是根目录
                                // 添加到catalog中
                                $('#wiki-catelog').append(li);
                            } else {
                                $("#id_" + item.parent).children('ul').append(li);
                            }
                        })
                    } else {
                        alert('初始化wiki目录失败');
                    }
                }
            });
        }
    </script>
{% endblock %}